<template>
  <div class="countdown">
    <div class="c-pb80">开始测试</div>
    <div class="countdown-circle">
      <span :class="[oneClassIn ? 'in':'',oneClassOut ? 'out' : '']">3</span>
      <span :class="[twoClassIn ? 'in':'',twoClassOut ? 'out' : '']">2</span>
      <span :class="[threeClassIn ? 'in':'',threeClassOut ? 'out' : '']">1</span>
      <span :class="['c-fs48', startClassIn ? 'in':'',startClassOut ? 'out' : '']">START</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Countdown",
  props: {
    countdownTime: {
      //绑定的输入框的值
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      oneClassIn: true,
      oneClassOut: false,
      twoClassIn: false,
      twoClassOut: false,
      threeClassIn: false,
      threeClassOut: false,
      startClassIn: false,
      startClassOut: false
    };
  },
  mounted() {
    this.startCount();
  },
  methods: {
    startCount() {
      let count = 0;
      this.oneClassIn = true;
      this.oneClassOut = false;
      this.twoClassIn = false;
      this.twoClassOut = false;
      this.threeClassIn = false;
      this.threeClassOut = false;
      this.startClassIn = false;
      this.startClassOut = false;
      let jishu = setInterval(() => {
        count++;
        switch (count) {
          case 1:
            this.oneClassOut = true;
            break;
          case 2:
            this.twoClassIn = true;
            break;
          case 3:
            this.twoClassOut = true;
            break;
          case 4:
            this.threeClassIn = true;
            break;
          case 5:
            this.threeClassOut = true;
            break;
          case 6:
            this.startClassIn = true;
            break;
          default:
            count = 0;
            this.$emit("hideCountdown");
            clearInterval(jishu);

            break;
        }
      }, 500);
    }
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.countdown {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  /*margin-top: 5rem;*/
  padding-top: 5rem;
}
.countdown-circle {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #9cddee;
  color: #fff;
  text-align: center;
  line-height: 5rem;
  overflow: hidden;
  position: relative;
  font-size: 2.5rem;
  margin: 0 auto;
}
.countdown-circle span {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  transform: translate(-50%) rotate(120deg);
  -webkit-transform: translate(-50%) rotate(120deg);
  transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  width: 100%;
}

.in {
  transform: translate(-50%) rotate(0deg);
  -webkit-transform: translate(-50%) rotate(0deg);
  animation: goIn 0.45s ease-in-out;
  -webkit-animation: goIn 0.45s ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.out {
  animation: goOut 0.5s ease-in-out;
  -webkit-animation: goOut 0.5s ease-in-out;
}
@keyframes goIn {
  0% {
    transform: translate(-50%) rotate(120deg);
    -webkit-transform: translate(-50%) rotate(120deg);
  }
  30% {
    transform: translate(-50%) rotate(-20deg);
    -webkit-transform: translate(-50%) rotate(-20deg);
  }

  60% {
    transform: translate(-50%) rotate(10deg);
    -webkit-transform: translate(-50%) rotate(10deg);
  }

  90%,
  100% {
    transform: translate(-50%) rotate(0deg);
    -webkit-transform: translate(-50%) rotate(0deg);
  }
}
@keyframes goOut {
  0%,
  30% {
    transform: translate(-50%) rotate(0deg);
    -webkit-transform: translate(-50%) rotate(0deg);
  }

  60% {
    transform: translate(-50%) rotate(20deg);
    -webkit-transform: translate(-50%) rotate(20deg);
  }

  100% {
    transform: translate(-50%) rotate(-120deg);
    -webkit-transform: translate(-50%) rotate(-120deg);
  }
}
@-webkit-keyframes goIn {
  0% {
    transform: translate(-50%) rotate(120deg);
    -webkit-transform: translate(-50%) rotate(120deg);
  }
  30% {
    transform: translate(-50%) rotate(-20deg);
    -webkit-transform: translate(-50%) rotate(-20deg);
  }

  60% {
    transform: translate(-50%) rotate(10deg);
    -webkit-transform: translate(-50%) rotate(10deg);
  }

  90%,
  100% {
    transform: translate(-50%) rotate(0deg);
    -webkit-transform: translate(-50%) rotate(0deg);
  }
}
@-webkit-keyframes goOut {
  0%,
  30% {
    transform: translate(-50%) rotate(0deg);
    -webkit-transform: translate(-50%) rotate(0deg);
  }

  60% {
    transform: translate(-50%) rotate(20deg);
    -webkit-transform: translate(-50%) rotate(20deg);
  }

  100% {
    transform: translate(-50%) rotate(-120deg);
    -webkit-transform: translate(-50%) rotate(-120deg);
  }
}
</style>
